<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="true" title="搜索商品"></u-navbar>
		</view>
		<view class="container_B">
			<u-search placeholder="请输入商品内容" v-model="keyword" @search="searchCt" @custom="searchCt"></u-search>
		</view>
		<!-- 商品数据 -->
		<view class="wrap">
			<u-waterfall v-model="flowList" ref="uWaterfall1">
				<template v-slot:left="{leftList}">
					<view class="item" v-for="item in leftList" :key="item.id" @click="goGoodsDetail(item.id)">
						<view class="goods">
							<view class="img">
								<image :src="item.images_format[0]" mode="widthFix" style="width: 300rpx;"></image>
							</view>
							<view class="name">
								{{item.name}}
							</view>
							<view class="price_l flc">
								<view class="price">
									￥{{item.min_price}}
								</view>
								<view class="lprice ml2">
									￥{{item.scribed_price}}
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="item" v-for="item in rightList" :key="item.id" @click="goGoodsDetail(item.id)">
						<view class="goods">
							<view class="img">
								<image :src="item.images_format[0]" mode="widthFix" style="width: 300rpx;"></image>
							</view>
							<view class="name">
								{{item.name}}
							</view>
							<view class="price_l flc">
								<view class="price">
									￥{{item.min_price}}
								</view>
								<view class="lprice ml2">
									￥{{item.scribed_price}}
								</view>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
		</view>
		<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
	</view>
</template>
<script>
	import {
		getGoodsList,
	} from '@/api/index.js'
	import {
		tiao
	} from '@/utils/common.js'
	import baseUrl from '@/config/config.js'
	export default {
		data() {
			return {

				// 显示加载更多
				loadStatus: 'loadmore',
				flowList: [],
				// 瀑布流数据
				goodList: [],
				page: 1,
				showList: [],
				scrollTop: 0

			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			// this.getGoods()
		},
		onReachBottom() {
			// 模拟数据加载
			if (this.loadStatus == 'loadmore') {
				this.searchCt()
			}
		},
		methods: {

			searchCt() {
				this.loadStatus = 'loading';
				getGoodsList({
					keyword: this.keyword,
					page: 1,
				}).then(res => {
					this.loadStatus = 'loadmore';
					let arr = []
					this.goodList = res.list
					if (res.last_page > res.page) {
						this.page++
					} else {
						this.loadStatus = "nomore"
					}
					if (res.list.length > 0) {
						this.addRandomData()
					}

				})
			},
			addRandomData() {

				for (let i = 0; i < this.goodList.length; i++) {
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.goodList[i]))
					this.flowList.push(item);
				}
			},
			remove(id) {
				this.$refs.uWaterfall1.remove(id);
			},
			clear() {
				this.$refs.uWaterfall1.clear();
			},
			goNotice(index) {
				console.log(index);
			},
			goGoodsDetail(id){
				tiao('/page/goodsDetail/goodsDetail?id='+id)
			},
			goPage(url) {
				tiao(url)
			}
		}
	}
</script>
<style lang="scss" scoped>

	.item {
		width: 320rpx;
		min-height: 400rpx;
		box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		padding: 10rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
	
		.name {
			width: 300rpx;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	
		.price {
			color: $u-type-error;
		}
	
		.lprice {
			text-decoration: line-through;
			color: #666;
		}
	}
</style>